<template>
<div>
    <router-link :to="'/serviceDetail?id='+data.id" style="display:flex;justify-content: space-between;margin-bottom:20px;background:#ffffff;padding:0 15px">
        <img :src="data.imgUrl" class="pic">
        <div class="spec"><span class="title" style="margin-left:0">{{data.title}}</span><p><span>尺码：{{data.size}}</span><span>颜色：{{data.color}}</span></p></div>
        <div class="sum"><span>￥{{data.price}}</span><span>×{{data.num}}</span></div>
    </router-link>
</div>
    
</template>
<script>
export default {
    name:'serverList',
    data () {
        return {
            
        }
    },
    props:['data'],
    mounted(){
    }
}
</script>
<style lang='scss'>
    .pic{
        width:75px;
        height:75px;
    }
    a{
        .title{
            color:#333333;
        }
        .spec{
            width:50%;
            p{
                span{
                    // display:block;
                    display:inline-block;
                    margin-right:10px;
                    font-size:12px;
                    color:#666666;
                }
            }
        }
        .sum{
            text-align:right;
            span{
                color:#666666;
                display:block;
            }
        }
    }
</style>